<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直对齐</title>
    <style>
      .box{
          width: 300px;
          height: 200px;
          border: 1px solid red;
      }
      /* 
        使行内元素盒模型与其行内元素容器垂直对齐 用于垂直对齐一行文本的内的图片
        垂直对齐表格单元内容:
       */
      .box span{
          /* vertical-align:bottom; */
      }
    </style>
</head>
<body>
   <div class="box">
       hdcaushu
       <span>hello</span>
   </div>
</html>